<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单组件化(站点导航)</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/nav-site.css"/>
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site" id="nav-site">
    <div class="container">
        <ul class="fl">
            <li class="fl"><a href="javascript:" class="nav-site-login">亲，请登录</a></li>
            <li class="fl"><a href="javascript:" class="nav-site-signup link">免费注册</a></li>
            <li class="fl"><a href="#"  class="nav-site-mobile link">手机逛慕淘</a></li>
        </ul>
        <ul class="fr">
            <li class="menu dropdown fl"  data-active="menu">
                <a href="#" class="dropdown-toggle link  transition">我的慕淘<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="#"  class="dropdown-item">已买到的宝贝</a></li>
                    <li><a href="#"  class="dropdown-item">我的足迹</a></li>
                </ul>
            </li>
            <li class="menu dropdown fl" data-active="menu">
                <a href="#"  class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="#"  class="dropdown-item">收藏的宝贝</a></li>
                    <li><a href="#"  class="dropdown-item">收藏的店铺</a></li>
                </ul>
            </li>
            <li class="fl">
                <a href="#"  class="nav-site-category link">商品分类</a>
            </li>
            <li class="menu dropdown fl" data-active="menu" data-load="json/dropdown-seller.json" data-load_menu="nav_site">
                <a href="#"  class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li class="dropdown-loading"></li> <!-- 模拟延迟加载 -->
                    <!--  <li><a href="#"  class="dropdown-item">免费开店</a></li>
                         <li><a href="#"  class="dropdown-item">已卖出的宝贝</a></li>
                         <li><a href="#"  class="dropdown-item">出售中的宝贝</a></li>
                         <li><a href="#"  class="dropdown-item">卖家服务市场</a></li>
                         <li><a href="#"  class="dropdown-item">卖家培训中心</a></li>
                         <li><a href="#"  class="dropdown-item">体验中心</a></li> -->
                </ul>
            </li>
            <li class="menu dropdown fl nav-site-service" data-active="menu">
                <a href="#"  class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="#"  class="dropdown-item">消费者客服</a></li>
                    <li><a href="#"  class="dropdown-item">卖家客服</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!-- 站点导航结束 -->

<!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
<script>
    window.jQuery || document.write('<script src="js/jquery.js"><\/script>'); //判断是否有jquery库
</script>
<script src="js/transition.js"></script><!-- 当前浏览器支持 transition 的信息-->
<script src="js/showHide.js"></script><!-- 显示隐藏元素 -->
<script src="js/dropdown.js"></script><!-- 显示隐藏下拉框 -->
<script src="js/nav-site.js"></script><!-- 站点导航js调用 -->
</body>
</html>